<!DOCTyPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background: skyBlue;
            position: absolute;
        }

        .a {
            width: 2000px;
            height: 1500px;
            background-color: #ccc;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="add">新增</button>
        <div class="a">

        </div>
        <div v-for="(item, index) in list" :key="index" :class="'box' + index" id="box" v-focus:class="'box' + index">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <script>
        // 问题 匿名函数 移除监听器失败   
        var app = new Vue({
            el: '#app',
            directives: {
                focus: {
                    // 指令的定义
                    inserted: function (el, binding) {
                        const box = document.querySelector('.' + binding.value)
                        el.addEventListener('mousemove', function (e) {
                            // let startX = e.clientX
                            // let left = box.offsetLeft,
                            //     top = box.offsetTop,
                            //     x = box.clientWidth + left - e.clientX,
                            //     y = box.clientHeight + top - e.clientY
                            let x = box.offsetWidth - e.offsetX
                            let y = box.offsetHeight - e.offsetY
                            if (x < 15) {
                                el.style.cursor = 'e-resize'
                                el.addEventListener('mousedown', dragLeft)
                                el.removeEventListener('mousedown', dragTop)
                                el.removeEventListener('mousedown', dragLeftTop)
                                el.removeEventListener('mousedown', move)
                            }
                            else if (y < 15) {
                                el.style.cursor = 's-resize'
                                el.addEventListener('mousedown', dragTop)
                                el.removeEventListener('mousedown', move)
                                el.removeEventListener('mousedown', dragLeftTop)
                                el.removeEventListener('mousedown', dragLeft)

                            }
                            else {
                                el.style.cursor = 'move'
                                el.removeEventListener('mousedown', dragLeft)
                                el.removeEventListener('mousedown', dragTop)
                                el.removeEventListener('mousedown', dragLeftTop)
                                el.addEventListener('mousedown', move)


                            }
                            if (x < 20 && y < 20) {
                                el.style.cursor = 'se-resize'
                                el.addEventListener('mousedown', dragLeftTop)
                            }


                            document.onmouseup = function () {
                                document.onmousemove = null
                                document.onmouseup = null
                                el.releaseCapture && el.releaseCapture()
                            }
                            el.setCapture && el.setCapture()
                            return false

                        });





                        function dragLeft (e) {
                            const w = box.clientWidth
                            let startX = e.clientX
                            document.onmousemove = function (event) {
                                el.style.width = event.clientX - startX + w + 'px'
                                return false
                            }
                        }

                        function dragTop (e) {
                            const h = box.clientHeight
                            let startY = e.clientY
                            document.onmousemove = function (event) {
                                el.style.height = event.clientY - startY + h + 'px'
                                return false
                            }

                        }

                        function dragLeftTop (e) {
                            const w = box.clientWidth
                            const h = box.clientHeight
                            let startY = e.clientY
                            let startX = e.clientX
                            document.onmousemove = function (event) {
                                el.style.width = event.clientX - startX + w + 'px'
                                el.style.height = event.clientY - startY + h + 'px'
                                return false
                            }

                        }

                        function move (e) {
                            let startX = e.clientX,
                                startY = e.clientY,
                                left = el.offsetLeft,
                                top = el.offsetTop
                            let moveFun = (event) => {
                                let X = event.clientX - startX
                                let Y = event.clientY - startY
                                el.style.left = `${left + X}px`
                                el.style.top = `${top + Y}px`
                            }
                            document.addEventListener('mousemove', moveFun)
                            el.addEventListener('mouseup', () => {
                                document.removeEventListener('mousemove', moveFun)
                            })

                        }


                    }
                }
            },
            data: {
                list: [{}]
            },
            methods: {
                add () {
                    console.log(111);
                    this.list.push({})
                    console.log('this.list: ', this.list);
                }
            }
        })
    </script>

</body>

</html>